<template>
  <div class="scan-charts">
    <div class="scan-toolbar">
      <div v-if="isScan" class="pd6 br1">
        <el-button @click="switchType">{{ scanTypeText }}</el-button>
      </div>
      <div v-if="isMonitor" class="pd6 br1">
        <el-button @click="switchType">{{ monitorTypeText }}</el-button>
      </div>
      <el-checkbox-group v-model="checkList" class="pd6 br1" @change="valueChange">
        <el-checkbox
          v-for="item in lineTypes"
          :key="item.value"
          v-model="item.value"
          :label="item.label"
          border
        />
      </el-checkbox-group>
      <div class="pd6 br1">
        <el-button @click="showResetZoom">全频段</el-button>
      </div>
      <div v-if="isScan" class="pd6 bl1" style="display: inline-flex">
        <el-select
          v-model="selectedFreStds"
          :teleported="false"
          multiple
          collapse-tags
          collapse-tags-tooltip
          effect="dark"
          value-key="label"
        >
          <el-option
            v-for="item in frequencyStandards"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <el-checkbox v-model="isActive" label="激活" border />
        <el-checkbox v-model="isTopFollow" label="峰值跟踪" border />
      </div>
      <div v-if="isMonitor" class="pd6 bl1" style="display: inline-flex">
        <el-checkbox v-model="isTopFollow" label="峰值跟踪" border />
        <el-checkbox v-model="isMin" label="最小值" border />
        <el-checkbox v-model="isDiffMarker" label="差值标记" border />
      </div>
      <div v-if="isScan" class="pd6 bl1">
        <el-button @click="switchAssit">{{ assistChartName }}</el-button>
      </div>
      <div v-if="isMonitor" class="pd6 bl1">
        <el-button @click="switchSignalType">{{ signalTypeText }}</el-button>
      </div>
    </div>
    <div class="spectrum">
      <Spectrum
        ref="spectrumRef"
        :show-lines="checkList"
        :selected-fremarkers="selectedFreStds"
        :is-active="isActive"
        :is-top-follow="isTopFollow"
        :data-list="dataList"
      />
    </div>
    <div v-if="dataList" class="water-fall">
      <waterFallPlot
        :is-online="true"
        :data="dataList.current"
        :min-db="spectrum.refLevel - 100"
        :max-db="spectrum.refLevel * 1"
        :height="50"
        :legend-width="60"
      />
    </div>
  </div>
</template>

<script setup name="AnalyseChart">
  import useScanStore from '@/store/modules/scanMonitor'
  import Spectrum from '@/components/SpectrumSignal/Spectrum.vue'
  import waterFallPlot from '@/views/analyse/modules/WaterFallPlot.vue'
  import { lineTypes } from '@/constant'

  const props = defineProps({
    viewType: {
      type: String,
      default: 'scan' // scan 扫描  monitor 监测
    },
    dataList: {
      type: Object,
      default: () => ({})
    }
  })
  const frequencyStandards = [
    { label: '频标1', value: 1 },
    { label: '频标2', value: 2 },
    { label: '频标3', value: 3 },
    { label: '频标4', value: 4 },
    { label: '频标5', value: 5 }
  ]
  const scanStore = useScanStore()
  const { spectrum } = scanStore
  const checkList = ['实时', '平均', '最大', '最小', '门限']
  const spectrumRef = ref(null)
  const selectedFreStds = ref([])
  const isActive = ref(true)
  const isTopFollow = ref(false)
  const isMin = ref(false)
  const isDiffMarker = ref(false)
  const assistChartType = ref(0)
  const assistChartName = computed(() => (assistChartType.value === 0 ? '瀑布图' : '占用度'))
  const isScan = computed(() => props.viewType === 'scan')
  const isMonitor = computed(() => props.viewType === 'monitor')
  const scanTypeText = computed(() => (scanStore.analyseType ? '离散' : '全景'))
  const monitorTypeText = computed(() => (scanStore.monitorType ? '雷达监测' : '通信监测'))
  const signalTypeText = computed(() => (scanStore.signalMonitorType ? '信号测向' : '信号监测'))
  const switchType = () => {
    if (isScan.value) {
      scanStore.analyseType = Number(!scanStore.analyseType)
    } else {
      scanStore.monitorType = Number(!scanStore.monitorType)
    }
  }
  const switchAssit = () => {
    assistChartType.value = Number(!assistChartType.value)
  }
  const switchSignalType = () => {
    scanStore.signalMonitorType = Number(!scanStore.signalMonitorType)
  }
  const showResetZoom = () => {
    spectrumRef.value.instance.zoomOut()
  }

</script>

<style scoped>
  .scan-charts {
    padding: 12px 8px;
  }

  .scan-toolbar {
    display: flex;
    border-top: 1px solid var(--toolbar-color);
    border-bottom: 1px solid var(--toolbar-color);
  }

  .pd6 {
    padding: 6px;
  }

  .br1 {
    border-right: 1px solid var(--toolbar-color);
  }

  .bl1 {
    border-left: 1px solid var(--toolbar-color);
  }
</style>
